<template>
  <el-container>
    <el-header class="header">
      <h1>新闻资讯</h1>
    </el-header>

    <el-main>
      <el-row>
        <!-- 新闻列表 -->
        <el-col :span="24" class="news-list" ref="newsListRef" v-if="!selectedNews">
          <el-card v-for="(news, index) in newsList" :key="index" class="news-card" @click="selectNews(news)">
            <el-row>
              <el-col :span="6">
                <img :src="`http://localhost/dev-api${news.coverImage}`" alt=""
                  style="max-height: 150px; min-width: 50%; max-width: 250px ; height: 100%; object-fit: cover; border-radius: 5px;">
              </el-col>
              <el-col :span="18" style="padding-left: 20px;">
                <h3>{{ news.title }}</h3>
                <p class="meta">{{ news.publishTime }}</p>
                <p class="summary">{{ news.summary }}</p>
              </el-col>
            </el-row>
          </el-card>
        </el-col>

        <!-- 新闻详情 -->
        <el-col :span="24" v-else class="news-detail">
          <div class="ql-editor">
            <el-button @click="backToList" type="text" class="back-btn">返回列表</el-button>
            <h2 class="news-title">{{ selectedNews.title }}</h2>
            <p class="meta">{{ selectedNews.publishTime }}</p>
            <el-divider class="news-divider" />
            <div class="news-content" v-html="selectedNews.content"></div>
          </div>

        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { listAllNews } from "../../api/index";
import { gsap } from 'gsap';
import Quill from "quill";
import 'quill/dist/quill.core.css';  // 基本样式
import 'quill/dist/quill.snow.css';  // 雪花主题样式
import 'quill/dist/quill.bubble.css';  // 气泡主题样式



const route = useRoute();
const router = useRouter();

const newsList = ref([]);
const selectedNews = ref(null);
const newsListRef = ref(null); // 绑定新闻列表 DOM

// 获取所有新闻
onMounted(async () => {
  const res = await listAllNews();
  newsList.value = res.data.rows;

  nextTick(() => {
    animateNewsList();
  });

  loadSelectedNews(route.query.No);
});

// 监听路由变化，加载新闻详情
watch(() => route.query.No, (newNo) => {
  loadSelectedNews(newNo);
});

// 监听 selectedNews 变化
watch(selectedNews, (newValue) => {
  if (newValue) {
    nextTick(() => {
      animateNewsDetail();
    });
  } else {
    nextTick(() => {
      animateNewsList();
    });
  }
});

// 选中新闻
function selectNews(news) {
  selectedNews.value = news;
  router.push({ path: "/news", query: { No: news.id } });
}

// 加载选中的新闻
function loadSelectedNews(newsId) {
  if (newsId) {
    selectedNews.value = newsList.value.find(news => news.id == newsId) || null;
  } else {
    selectedNews.value = null;
  }
}

// 返回新闻列表
function backToList() {
  selectedNews.value = null;
  router.push({ path: "/news" });
}

// 新闻详情动画
function animateNewsDetail() {
  const newsTitle = document.querySelector('.news-title');
  const newsMeta = document.querySelector('.meta');
  const newsDivider = document.querySelector('.news-divider');
  const newsContent = document.querySelector('.news-content');

  gsap.set([newsTitle, newsMeta, newsDivider, newsContent], {
    opacity: 0,
    y: 20,
  });

  gsap.to([newsTitle, newsMeta, newsDivider, newsContent], {
    opacity: 1,
    y: 0,
    duration: 0.5,
    stagger: 0.3,
    ease: 'power2.out',
  });
}

// 新闻列表动画
function animateNewsList() {
  if (!newsListRef.value) return;
  console.log(newsList.value, 'newsListRef')
  const newsCards = gsap.utils.toArray('.news-card');

  gsap.set(newsCards, { opacity: 0, y: 30 });

  gsap.to(newsCards, {
    opacity: 1,
    y: 0,
    duration: 0.5,
    stagger: 0.2,
    ease: "power2.out",
  });
}
</script>


<style scoped>
/* 通用样式 */
.header {
  background-color: #003366;
  color: white;
  text-align: center;
  line-height: 20px;
}

/* 整体的布局，宽屏边缘占比10vw,窄屏默认即可 */
.el-main {
  margin: 0 10vw;
}

@media (max-width: 1000px) {
  .el-main {
    margin: 0;
  }
}

.header h1 {
  font-size: 2em;
  margin: 20px 0;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.news-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news-card {
  cursor: pointer;
  border: 1px solid #e6e6e6;
  padding: 15px;
  transition: transform 0.2s ease;
  height: 200px;
}

/* .news-card:hover {
    transform: translateY(-5px);
  } */

.news-detail {
  padding: 20px;
}

.news-detail .back-btn {
  margin-bottom: 20px;
}

.meta {
  color: #888;
  font-size: 0.9em;
}

.summary {
  color: #555;
  font-size: 1em;
}

/* 窄屏适配 */
@media screen and (max-width: 768px) {
  .header h1 {
    font-size: 1.5em;
  }

  .news-card {
    padding: 10px;
  }

  .news-detail {
    padding: 10px;
  }
}


/* 自定义字体大小 */
.ql-size-huge {
  font-size: 36px !important;
  /* 可以调整为你需要的大小 */
}
</style>